<template>
  <div class="model-efficiency">
    <div class="top">
      <div class="chart left-chart">
        <exam-time-chart
          :x-labels="state.xLabels"
          :min-timevalues="state.minTimevalues"
          :max-timevalues="state.maxTimevalues"
          :num-values="state.numValues"
        />
      </div>
      <!-- <div class="chart right-chart">
        <exam-scheme-chart
          :y-labels="state.yLabels"
          :max-timevalue="state.maxValue"
          :min-timevalue="state.minValue"
        />
      </div> -->
    </div>
    <div class="bottom">
      <div class="box left-box">
        <div class="title">模型计算效能统计说明</div>
        <div class="content">
          <div class="line">
            <span class="text">考核要求：</span>
            <span class="num blue">{{ state.scoreInfo.standard }}s</span>
            <span class="text ml20">考核结果：</span>
            <span :class="['num', state.scoreInfo.khResult == '合格' ? 'green' : 'red']">{{
              state.scoreInfo.khResult
            }}</span>
          </div>
          <div class="line">
            <span class="text">本次运行累计总时长:</span>
            <span class="num">{{ state.scoreInfo.runTimes || '0' }}</span>
            <span class="text">s</span>
            <span class="text ml20">投入累计运行时间:</span>
            <span class="num blue">{{ state.scoreInfo.runTimes || '0' }}</span>
            <span class="text">s</span>
            <!-- <span class="text ml20">失败调用次数：</span>
            <span class="num blue">90</span>
            <span class="text">次</span> -->
          </div>
          <!-- <div class="line">
            <span class="text">成功率：</span>
            <span class="num green">99%</span>
          </div> -->
          <div class="line">
            <span class="text">成功调用次数:</span>
            <span class="num">{{ state.scoreInfo.snum || '0' }}</span>
            <span class="text">次</span>
            <span class="text ml20">最大耗时</span>
            <span class="num blue">{{
              state.scoreInfo.maxTime ? Number(state.scoreInfo.maxTime).toFixed(2) : '0'
            }}</span>
            <span class="text">s</span>
            <span class="text ml20">最小耗时:</span>
            <span class="num blue">{{
              state.scoreInfo.minTime ? Number(state.scoreInfo.minTime).toFixed(2) : '0'
            }}</span>
            <span class="text">s</span>
          </div>
          <div class="line">
            <span class="text">平均单次耗时:</span>
            <span class="num green">{{
              state.scoreInfo.tkTimeAvg ? Number(state.scoreInfo.tkTimeAvg).toFixed(2) : '0'
            }}</span>
            <span class="text">s</span>
          </div>
        </div>
      </div>
      <div class="box right-box">
        <div class="title">模型计算效能详情</div>
        <div class="content">
          <div class="table">
            <el-table :data="state.tableData" border height="100%">
              <el-table-column prop="times" label="调用日期" align="center">
                <template #default="{ row }">
                  {{ row.year + '-' + row.month + '-' + row.day }}
                </template>
              </el-table-column>
              <el-table-column prop="maxTime" label="最大耗时" align="center">
                <template #default="{ row }">
                  {{ Number(row.maxTime).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="minTime" label="最小耗时" align="center">
                <template #default="{ row }">
                  {{ Number(row.minTime).toFixed(2) }}
                </template>
              </el-table-column>
              <el-table-column prop="tktimeAvg" label="平均耗时" align="center">
                <template #default="{ row }">
                  {{ Number(row.tktimeAvg).toFixed(2) }}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="page">
            <el-pagination
              v-model:current-page="state.pages.pageNum"
              :page-size="state.pages.pageSize"
              background
              layout="total, prev, pager, next"
              :total="state.total"
              @current-change="handleCurrentChange"
            />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import examSchemeChartVue from '@/components/app-echart/exam-scheme-chart.vue'
import examTimeChartVue from '@/components/app-echart/exam-time-chart.vue'
//接口
import {
  modelEnergyEfficiencyList,
  modelForecastSectionStatistics,
  getModelScoring,
  modelEfficiency
} from '@/services/modules/model-exam'
//bus
import emitter from '@/utils/bus'
const currentPage = ref(1)
const state = reactive({
  scoreInfo: {},
  formEmit: {},
  yLabels: [], //y数据
  maxValue: [], //最大耗时断面
  minValue: [], //最小耗时断面
  tableData: [],
  xLabels: [], //耗时x轴
  minTimevalues: [], //最小耗时
  maxTimevalues: [], //最大耗时
  numValues: [], //调用次数
  pages: {
    pageSize: 10,
    pageNum: 1
  },
  total: 0
})
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

onMounted(() => {
  // initData()
  // searchDataValue(state.formEmit)
})
onUnmounted(() => {})
const searchDataValue = (val) => {
  state.xLabels = []
  state.minTimevalues = []
  state.maxTimevalues = []
  state.formEmit = val
  // debugger
  modelEfficiency(val).then((res) => {
    if (res.code === 200) {
      res.data.times.forEach((item) => {
        state.xLabels.push(item.times)
        state.minTimevalues.push(item.minTime)
        state.maxTimevalues.push(item.maxTime)
        // state.state.numValues.push(item.)
      })
      state.scoreInfo = res.data.instructions
      state.tableData = res.data.rate
    }
  })
}
watch(
  () => {
    props.data
  },
  () => {
    searchDataValue(props.data)
  },
  {
    deep: true,
    immediate: true
  }
)
emitter.on(
  'searchData',
  searchDataValue
  //  (value) => {
  //   state.tableData = []
  //   state.xLabels = []
  //   state.minTimevalues = []
  //   state.maxTimevalues = []
  //   state.numValues = []
  //   state.yLabels = []
  //   state.maxValue = []
  //   state.minValue = []
  //   initData(value)
  // }
)
//分页
function handleCurrentChange(value) {
  // state.pages.pageSize = val
  state.pages.pageNum = value
  initData()
}
//初始化数据
function initData(data) {
  state.tableData = []
  state.xLabels = []
  state.minTimevalues = []
  state.maxTimevalues = []
  state.numValues = []
  modelEnergyEfficiencyList({ ...state.pages, ...data }).then((res) => {
    if (res.code === 200 && res.data) {
      if (res.data.list.length) {
        let arr = res.data.list
        state.total = res.data.totalRow
        state.tableData = arr
        arr.forEach((e) => {
          state.xLabels.push(e.accessDate)
          state.minTimevalues.push(e.minTime)
          state.maxTimevalues.push(e.maxTime)
          state.numValues.push(e.failNum || 0 + e.successNum || 0)
        })
      } else {
        state.tableData = []
        state.xLabels = []
        state.minTimevalues = []
        state.maxTimevalues = []
        state.numValues = []
      }
    }
  })
  modelForecastSectionStatistics({ ...data }).then((res) => {
    if (res.code === 200) {
      let arr = res.data
      if (arr.length) {
        arr.forEach((item) => {
          state.yLabels.push(item.blknm)
          state.maxValue.push(item.maxTime)
          state.minValue.push(item.minTime)
        })
      } else {
        state.yLabels = []
        state.maxValue = []
        state.minValue = []
      }
    }
  })
  getModelScoring({ ...data }).then((res) => {
    if (res.code === 200 && res.data) {
      state.scoreInfo = res.data
    }
  })
}
</script>

<style lang="less" scoped>
.model-efficiency {
  display: flex;
  flex-direction: column;
  height: 100%;

  .top {
    display: flex;
    flex-direction: row;
    height: 300px;

    .chart {
      flex: 1;
    }
  }

  .bottom {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: calc(100% - 300px);

    .box {
      flex: 1;

      .title {
        line-height: 30px;
        text-align: center;
        font-size: 16px;
      }

      .content {
        height: calc(100% - 30px);
        box-sizing: border-box;
      }
    }

    .left-box {
      .content {
        display: flex;
        flex-direction: column;
        padding: 20px 50px 20px 20px;
      }

      .line {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .num {
          font-weight: 700;
          font-size: 20px;
          margin: 0 5px;
        }

        .blue {
          color: #0054db;
        }

        .green {
          color: #70b603;
        }
        .red {
          color: red;
        }
      }
    }

    .right-box {
      .table {
        height: calc(100% - 50px);
      }

      .page {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
      }
    }
  }
}
</style>
